<template>
  <section class="min-h-screen">
    <div class="container mx-auto flex flex-col items-start md:flex-row my-24">
      <div v-once class="flex flex-col sticky md:(top-24 w-1/2) lg:w-2/5 px-8">
        <Card title="前端技术教学" subject="Front-end Technology">
          <strong
            data-title="还不就是吹过的牛想实现一下呗！"
            class="text-teal-500 text-4xl text-shadow-md float-left mr-2"
          >
            原
          </strong>
          建立这个网站，是希望可以给我的学生们一个技术讨论和进阶的向导。
          对于组件大家并不陌生，在平时工作中也大量使用组件库
          <strong class="font-mono text-accent uppercase">
            <a
              class="hover:text-secondary"
              target="_blank"
              href="https://element-plus.gitee.io/zh-CN/"
            >
              element + for vue
            </a>
            ,
            <a
              class="hover:text-info"
              target="_blank"
              href="https://ant.design/index-cn"
            >
              ant design for react
            </a>
          </strong>
          或最佳实践项目，但对于组件实现的细节和原理都不甚清楚。
          希望通过教学案例可以和学员们一起讨论如何更好编写和使用组件。
          <a
            @click="view = HomeTimeline"
            class="text-primary hover:text-secondary"
          >
            网站时间线......
          </a>
        </Card>
        <Card title="教学案例" subject="Teaching Case">
          案例使用是
          <strong class="text-primary">Todos</strong>
          待办信息管理。这个例子的群众基础好，
          网上很多简单的案例都是使用这个例子。
          业务逻辑简单，可扩展的空间也大。你可以通过
          <a
            @click="view = RegisterForm"
            class="text-primary hover:text-secondary"
          >
            用户注册
          </a>
          体验本案例中的功能。
        </Card>
        <Footer />
      </div>
      <div class="ml-0 w-full md:w-1/2 lg:w-3/5 px-8">
        <component :is="view" @success="regSuccess"></component>
      </div>
    </div>
  </section>
</template>
<script lang="ts" setup>
import HomeTimeline from "@/components/HomeTimeline.vue";
import RegisterForm from "@/components/RegisterForm.vue";
import { useNotification } from "@/pkg/ZNotification.vue";

const view = shallowRef<typeof HomeTimeline | typeof RegisterForm>(
    HomeTimeline
  ),
  notification = useNotification(),
  regSuccess = () => {
    notification?.success("用户注册成功，请通过邮件链接进行账号激活！");
    view.value = HomeTimeline;
  };
</script>
